<template>
  <div>
    <el-row type="flex" justify="end">
      <el-button type="primary" plain size="mini" @click="addList()">新增模板</el-button>
    </el-row>
    <el-row class="list">
      <div class="item-wrap">
        <div class="item" v-for="item in templateList" :key="item.id">
          <div class="name text-over">{{item.name}}</div>
          <div class="content" v-html="item.content"></div>
          <div class="set">
            <el-button type="text" size="mini" @click="addList(item.id, item.name, item.content)">
              <span style="color: #2196F3">修改</span>
            </el-button>
            <el-button type="text" size="mini" @click="deleteTemplate(item.id)">删除</el-button>
            <el-button type="text" size="mini" v-if="isEdit" @click="chooseContent($event,item.content)"><span style="color: #4CAF50">应用</span></el-button>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          :current-page.sync="currentPage1"
          :page-size="this.size"
          @current-change="handleIndexChange"
          layout="prev, pager, next"
          :total="tableTotal">
        </el-pagination>
      </div>
      <pt-table-loading v-show="isLoadingTable" />
    </el-row>
    <el-dialog :title="(from.id ? '修改': '新增') + '商品详情模板'" v-dialogDrag
               :visible.sync="dialogTableVisible" :modal="false"
               width="434px" height="800px">
      <el-form :model="from" ref="ruleForm" label-position="top">
        <el-form-item label="模板名称" prop="name" :rules="[{request: true,message: '模板名称未填', target: 'blur'}]">
          <el-input v-model="from.name" type="text" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item prop="content"
                      :rules="[{ required: true, message: '未编辑模板', trigger: 'change'}]">
          <vue-html5-editor class="goods-disc"
                            :content="from.content"
                            @change="updateData" />

        </el-form-item>
      </el-form>
      <span slot="footer" style="text-align: right;">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" v-loading="submitLoading" @click="resetForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from '@/api/sc_other'
  export default {
    props: {
      busniessId: '',
      size: {
        type: Number,
        default: 14
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        from: {
          id: null,
          content: '',
          name: ''
        },
        currentPage1: 1, // 分页选择
        page: 0,
        tableTotal: null,
        templateList: [], // 模板列表
        dialogTableVisible: false,
        submitLoading: false,
        isLoadingTable: false,
        timeStamp: null
      }
    },
    methods: {
      updateData(e = ''){
        this.from.content = e
      },
      addList(id, name,content) { //新增模板
        this.from.id = id || null
        this.from.content = content || ''
        this.from.name = name || ''
        this.dialogTableVisible = true
      },
      handleIndexChange(current) { // 切换页码
        this.page = current - 1
        this.getTemplateList()
      },
      getTemplateList() { // 模板列表
        this.isLoadingTable = true
        api.goodsTemplateList({ page: this.page, size: this.size, busniessId: this.busniessId }).then(res => {
          if (res.success) {
            this.tableTotal = res.data.total
            this.templateList = res.data.list
          }
        }).finally(() => { this.isLoadingTable = false })
      },
      deleteTemplate(id) { // 删除
        api.goodsTemplateDelete({ id }).then(res => {
          if (res.success) {
            this.page = 0
            this.getTemplateList()
          }
        })
      },
      chooseContent($el,content) { // 选择模板
        if ($el.timeStamp - this.timeStamp < 300) return false
        this.timeStamp = $el.timeStamp
        this.$emit('chooseTemplate', content)
      },
      resetForm(formName) { // 新增、修改模板
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitLoading = true
            const params = { ...this.from }
            params.busniessId = this.busniessId
            if (this.from.id) {
              api.goodsTemplateUpdate(params).then(res => {
                if (res.success) {
                  this.dialogTableVisible = false
                  this.page = 0
                  this.getTemplateList()
                }
              }).finally(() => { this.submitLoading = false })
            } else {
              delete params.id
              api.goodsTemplateSave(params).then(res => {
                if (res.success) {
                  this.dialogTableVisible = false
                  this.getTemplateList()
                }
              }).finally(() => { this.submitLoading = false })
            }
          } else {
            return false
          }
        })
      }
    },
    mounted() {
      this.getTemplateList()
    }
  }
</script>

<style lang="scss" scoped>
  .goods-disc{
    width: 414px;
    /deep/ .content{
      height: 400px;
      overflow: scroll;
      width: 414px;
      img{
        max-width: 100%;
        font-size: 0;
        display: inherit;
      }
    }
  }
  .list{
    .item-wrap{
      min-height: 400px;
      display: flex;
      flex-flow: row wrap;
      padding-left: 20px;
      .item{
        width: 200px;
        height: 370px;
        overflow: hidden;
        margin: 0 20px 20px 0;
        .name{
          width: 100%;
          height: 30px;
          font-size: 16px;
          font-weight: bold;
        }
        .content{
          width: 400px;
          height: 600px;
          overflow: scroll;
          border: 1px solid #DCDFE6;
          box-sizing: border-box;
          transform: scale(.5);
          margin-top: -150px;
          margin-left: -100px;
          /deep/ img{
            max-width: 100%;
            font-size: 0;
            display: inherit;
          }
        }
        .set{
          margin-top: -145px;
        }
      }
    }
    .pagination{
      padding: 0 20px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
</style>
